import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';
import {Input, Button} from 'antd';

class MForm extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 4,
            style: {},
            dataset: {
                tableId: ''
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset} = data;
        var fieldList = dataset['_fieldList'] || [];

        function _getFieldNode(field) {
            var type = +field.type;

            switch (type) {
                case 0:
                    return <Input placeholder={field.content}/>;
                    break;
                case 1:
                    return <Input placeholder={field.content} type="textarea" rows={4}/>;
                    break;
            }
        }

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'mForm cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                {
                    fieldList.map(function (field) {
                        return (
                            <div className="mForm__item" key={'field__' + field.id}>
                                {
                                    _getFieldNode(field)
                                }
                            </div>
                        );
                    })
                }
                <div className="mForm__item mForm__item_submit">
                    <Button className="submitBtn" type="primary">{dataset.submitText || '提交'}</Button>
                </div>
            </div>
        );
    }
}

export default MForm;
